<template>
  <div class="select-type">
    <el-select
      class="selectType-title"
      v-model="selectTag.label"
      placeholder="请选择"
      ref="selectDom"
      @visible-change="visibleChange"
      :disabled="disabled"
    >
      <template #empty>
        <div class="custom-panel">
          <el-input
            size="small"
            placeholder="关键字搜索"
            v-model="searchInput"
            clearable
            @keyup="onSearch"
          >
            <template #append>
              <el-button type="primary" :icon="Search" @click="onSearch"> 搜索 </el-button>
            </template>
          </el-input>
          <div class="panel-main">
            <el-scrollbar class="sidebar" wrap-class="noScrollX">
              <ul class="typeList">
                <li
                  v-for="item in advanceCondList"
                  :key="item.value"
                  :class="['typeItem', { isActive: item.id == selectType.id }]"
                  @click="onSelectParent(item)"
                >
                  {{ item.label }}
                </li>
              </ul>
            </el-scrollbar>
            <el-scrollbar class="content" wrap-class="noScrollX">
              <div class="tags-wrap">
                <div
                  v-for="item in tags"
                  :key="item.value"
                  :class="['tag', { isActive: item.id == selectTag.id }]"
                  @click="onSelectChild(item)"
                >
                  <span v-if="searchValue">
                    {{ item.label.substr(0, item.label.indexOf(searchValue)) }}
                    <span class="primary">{{ searchValue }}</span>
                    {{ item.label.substr(item.label.indexOf(searchValue) + searchValue.length) }}
                  </span>
                  <span v-else>
                    {{ item.label }}
                  </span>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </template>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
  value: Object,
  disabled: Boolean
})
const { disabled } = toRefs(props)
const advanceCondList = ref([])
const emit = defineEmits(['change'])
const value = ref(props.value)
import { useEntStore } from '@/store/modules/ent'
const entStore = useEntStore()

const selectDom = ref(null)
// 绑定搜索框
const searchInput = ref('')
// 当前查询的搜索文本
const searchValue = ref('')
// 侧边栏的选中项
const selectType = ref({})
// 显示的标签
const tags = ref([])
// 标签选中项
const selectTag = ref({})
const allTag = computed(() => {
  return advanceCondList.value.reduce((all, cur) => {
    return [...all, ...cur.children]
  }, [])
})
const onSearch = () => {
  searchValue.value = searchInput.value
  if (searchValue.value) {
    selectType.value = {}
    tags.value = allTag.value.filter((item) => {
      return item.label.indexOf(searchValue.value) > -1
    })
  } else {
    initSelect()
  }
}

const onSelectParent = (item) => {
  selectType.value = item
  if (searchValue.value) {
    tags.value = item.children.filter((item) => item.label.indexOf(searchValue.value) > -1)
  } else {
    tags.value = item.children
  }
}
// 选中
const onSelectChild = (item) => {
  selectTag.value = item
  emit('change', item)
  selectDom.value.blur()
}
const visibleChange = (val) => {
  if (!val) return
  clearSearch()
  initSelect()
}
const selectOption = () => {
  return advanceCondList.value
    .flatMap((item) => item.children)
    .find((item) => item.id === value.value.id)
}
onMounted(async () => {
  watchEffect(() => {
    if (entStore.advanceCondList.length && advanceCondList.value.length == 0) {
      advanceCondList.value = entStore.advanceCondList
      const keyVal = selectOption()
      if (keyVal) selectTag.value = keyVal
    }
  })
})

const initSelect = () => {
  if (value.value.field) {
    const _selectType = advanceCondList.value.find((item) => {
      const _selectTag = item.children.find((child) => {
        return child == selectOption()
      })
      if (_selectTag) selectTag.value = _selectTag
      return !!_selectTag
    })
    selectType.value = _selectType || advanceCondList.value[0]
  } else {
    selectType.value = advanceCondList.value[0]
  }
  tags.value = selectType.value.children
}

const clearSearch = () => {
  searchInput.value = ''
  searchValue.value = ''
}

watch(
  () => props.value,
  (val) => {
    if ((val || []).length) {
      initSelect()
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
:deep(.selectType-title) {
  .el-input {
    .el-input__inner {
      font-size: 12px;
    }
  }
}
li {
  list-style: none;
}
ul {
  padding: 0;
}

:deep(.el-input-group__append) {
  background-color: #2362fb;
  color: #fff;
  border-color: #2362fb;
}

.custom-panel {
  width: 650px;
  padding: 24px;
  font-size: 12px;

  .panel-main {
    margin-top: 12px;
    height: 350px;
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    display: flex;

    .sidebar {
      flex: 0 0 120px;
      border-right: 1px solid #e4e7ed;
    }

    .content {
      flex: 1;
    }
  }
}

:deep(.noScrollX) {
  overflow-x: hidden;
}

.typeList .typeItem {
  padding: 12px 16px;
  cursor: pointer;

  &:hover {
    color: #409eff;
  }

  &.isActive {
    background-color: #f5f8ff;
    color: #409eff;
  }
}

.tags-wrap {
  padding: 4px 8px;
  display: flex;
  flex-wrap: wrap;

  .tag {
    border: 1px solid #e4e7ed;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 4px;
    cursor: pointer;
    &.isActive,
    &:hover {
      border-color: #409eff;
      color: #409eff;
    }
    span {
      font-size: 12px;
    }
  }
}

.primary {
  color: #409eff;
}
</style>
